import React, { FC, ReactElement, ReactHTMLElement, ReactNode } from 'react'
import './Button.css'
import Cless from 'classnames'
import { type } from '@testing-library/user-event/dist/type'

// classnames

// 通过枚举的方式定义btnType
// export enum BtnType {
//     Primary = "primary",
//     Success = "success",
//     Info = "info"
// }

// 通过类型别名的方式来定义btnType
type BtnType = "primary" | "success" | "info"

// 通过类型别名的方式来定义btnSize
type BtnSize = "lg" | "sm"

interface IProps {
    btnType?: BtnType,
    children?: ReactNode,
    btnSize?: BtnSize,
    // 禁用
    // 半圆， 全圆
    // 添加icon  通过属性控制在前面还是后面
}

// button标签上的原生属性
type IBtnProps = IProps & React.ButtonHTMLAttributes<HTMLElement>


const Button: FC<IBtnProps> = (props: IBtnProps) => {
    const { btnType, children, btnSize, ...event } = props
    const claess = Cless('el-button', {
        [`el-button--${btnType}`]: btnType,
        [`el-button--${btnSize}`]: btnSize
    })
    return <button { ...event } className={claess}>
        { children }
    </button>
}

export default Button
